<template>
  <section>
    <el-container
      class="page-content"
      :class="{ 'sidebar--show': !isCollapse, 'sidebar--hide': isCollapse }"
    >
      <el-aside class="sidebar">
        <cm-scroll>
          <div class="left_menu" :style="left_menu_height">
            <div
              class="flex-item-fixed"
              align="center"
              style="height: 140px;background-color: #363F50;margin-bottom: 10px;"
            >
              <img
                src="@/assets/bg.png"
                style="position: absolute;left: 0px;top: 0px;"
              />
              <!--               src="@/assets/logo_only.png"-->
              <img
                class="nav-logo"
                :src="sysConfig.indexLogo"
                alt=""
                v-if="!isCollapse"
              />
              <img
                v-else
                class="nav-logo-coll"
                :src="sysConfig.indexLogo"
                alt=""
              />
                            <!-- src="@/assets/sysName.png" -->
              <!-- <img
                :src="sysConfig.indexSystemName"
                style="width: 190px;"
                v-if="!isCollapse"
              /> -->
            </div>
            <nav-menu
              :menus="leftMenu"
              mode="vertical"
              :currentIndex="curLeftMenuIndex"
              background="#445162"
              textColor="#303133"
              :isCollapse="isCollapse"
              activeTextColor="#409eff"
              subTitleStyle="font-size: 16px;"
              iconStyle="margin-right:5px;"
              @select="handleMenuSelect"
            ></nav-menu>
            <div
              :class="{
                'collapse-button': !isCollapse,
                'collapse-button--hide': isCollapse
              }"
              :style="{
                'background-color': sysTheme
              }"
              @click="collapse"
            >
              <i
                style="color: white;"
                :class="[
                  'fa',
                  { 'fa-caret-left': !isIcon, 'fa-caret-right': isIcon }
                ]"
              ></i>
            </div>
          </div>
        </cm-scroll>
      </el-aside>
      <el-main class="right_main">
        <page-header :menus="userMenus" @openMenu="openMenuHead"></page-header>
        <el-container style="padding-left: 10px;margin-top: 10px;">
          <el-header class="right_breadcrumb">
            <box-border
              class="tab_card"
              style="height: 60px;line-height: 60px;"
            >
              <el-tabs
                v-model="tabActiveIndex"
                type="border-card"
                :closable="openTab.length > 1"
                v-if="openTab.length"
                ff
                @tab-click="tabClick"
                @tab-remove="tabRemove"
              >
                <el-tab-pane
                  :key="index + item.fullPath"
                  v-for="(item, index) in openTab"
                  :label="item.title"
                  :name="item.fullPath"
                >
                </el-tab-pane>
              </el-tabs>
            </box-border>
          </el-header>
          <el-main class="right_content" :style="right_content_height">
            <cm-scroll>
              <keep-alive>
                <router-view v-if="$route.meta.keepAlive"></router-view>
              </keep-alive>
              <router-view v-if="!$route.meta.keepAlive"></router-view>
            </cm-scroll>
          </el-main>
          <!--        <el-footer>-->
          <!--          <span>技术支持：我xx</span>-->
          <!--        </el-footer>-->
        </el-container>
      </el-main>
    </el-container>
    <vue-context-menu
      :contextMenuData="tabMenuNodes"
      @closeOtherRight="closeOtherRight"
      @closeAll="closeAll"
    >
    </vue-context-menu>
    <el-dialog
      title="请修改您的默认密码:"
      v-if="modifyStatus"
      :visible.sync="modifyStatus"
      :show-close="false"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      width="500px"
    >
      <el-card>
        <el-form
          ref="form"
          :model="passForm"
          label-width="125px"
          class="demo-form"
        >
          <el-form-item
            prop="oldPassword"
            label="原密码"
            :rules="[
              {
                required: true,
                message: '请填写原密码',
                trigger: 'change,blur'
              },
              { min: 6, message: '密码长度至少6位', trigger: 'blur' }
            ]"
          >
            <el-input type="password" v-model="passForm.oldPassword"></el-input>
          </el-form-item>

          <el-form-item
            prop="newPassword"
            label="新密码:"
            :rules="[
              {
                required: true,
                message: '请设置新密码',
                trigger: 'change,blur'
              },
              { validator: validatePassword, trigger: 'blur' }
            ]"
          >
            <el-input
              placeholder="请输入密码"
              type="password"
              v-model="passForm.newPassword"
            ></el-input>
          </el-form-item>

          <el-form-item
            prop="rePassword"
            label="重复密码:"
            :rules="[
              {
                required: true,
                message: '请再次填写新密码',
                trigger: 'change,blur'
              },
              { validator: validateRePass, trigger: 'change,blur' }
            ]"
          >
            <el-input
              placeholder="请再次输入密码"
              type="password"
              v-model="passForm.rePassword"
            ></el-input>
          </el-form-item>
        </el-form>
      </el-card>
      <div slot="footer">
        <el-button type="primary" @click="submit">
          提交
        </el-button>
      </div>
    </el-dialog>
  </section>
</template>
<script>
import NavMenu from "@/components/nav-menu";
import { mapGetters } from "vuex";
import ArrayUtil from "@/libs/ArrayUtil";
import _ from "lodash";
import md5 from "js-md5";
// 引入音频文件
import audio from "@/assets/video/sound.mp3";
import $ from "jquery";

export default {
  beforeRouteEnter(to, from, next) {
    next(vm => {
      vm.curRouteName = to.name;
      if (from.name === "login") {
        vm.addTab(to);
      }
      vm.getAllMenu();
    });
  },
  created() {
    this.getModify();
    this.sysConfig = JSON.parse(window.sessionStorage.getItem("systemConfig"));
    console.log(this.leftMenu);
  },
  mounted() {
    window.onresize = () => {
      return (() => {
        window.innerHeight = document.documentElement.clientHeight;
        this.$store.dispatch("setClientHeight", window.innerHeight);
        this.pageHeight = window.innerHeight;
      })();
    };
    this.getAllDic();
    this.initRightMenuEvent();
    this.getSystemSetting();
  },
  updated() {
    this.initRightMenuEvent();
  },
  data() {
    return {
      sysConfig: {},
      tabMenuNodes: {
        menuName: "tab-menu",
        axis: {
          x: null,
          y: null
        },
        menulists: [
          {
            fnHandler: "closeOtherRight",
            icoName: "edit",
            btnName: "关闭右侧其他"
          },
          {
            fnHandler: "closeAll",
            icoName: "edit",
            btnName: "关闭其他"
          }
        ]
      },
      curTabName: "", //右键选择的tab
      audio,
      passForm: {
        oldPassword: "",
        newPassword: "",
        rePassword: ""
      },
      currentPath: [],
      curRouteName: "",
      pageHeight: window.innerHeight,
      noIndex: false,
      isIcon: false,
      isCollapse: false,
      modifyStatus: false, //检测用户密码是否修改过
      // 密码正则校验
      passwordTest: "",
      passwordTestMessage: "",
      validatePassword: (rule, value, callback) => {
        if (!this.passwordTest) {
          callback();
          return;
        }
        if (!value) {
          callback(new Error(`密码不能为空`));
        }
        if (!eval(`/${this.passwordTest}/`).test(value)) {
          callback(new Error(`${this.passwordTestMessage}`));
          return;
        }
        if (value.length < 6) {
          callback(new Error(`密码最少设置6位`));
        }
        callback();
      },
      validateRePass: (rule, value, callback) => {
        if (value !== this.passForm.newPassword) {
          callback(new Error("两次输入密码不一致"));
        } else {
          callback();
        }
      }
    };
  },
  computed: {
    ...mapGetters({
      userMenus: "userMenus",
      leftMenu: "leftMenu",
      curLeftMenuIndex: "curLeftMenuIndex",
      openTab: "openTab",
      activeIndex: "activeIndex",
      sysTheme: "sysTheme",
      userRoleKeys: "userRoleKeys",
      documentPrompt: "documentPrompt"
    }),
    left_menu_height() {
      // return { height: this.pageHeight - 61 + "px" };
      return { height: this.pageHeight + "px" };
    },
    right_content_height() {
      const height = this.pageHeight - 142 + "px";
      return { height: height };
    },
    tabActiveIndex: {
      get() {
        return this.activeIndex;
      },
      set(val) {
        this.$store.dispatch("set_active_index", val);
      }
    }
  },
  methods: {
    // 获取应用配置(密码正则)
    getSystemSetting() {
      let obj = {
        id: 1
      };
      this.API.getSystemSettingById(obj).then(res => {
        let { data } = res;
        if (!data) {
          return;
        }
        let { passwordRegular, passwordRegularMessage } = data;
        this.passwordTest = passwordRegular;
        this.passwordTestMessage = passwordRegularMessage;
      });
    },
    openMenuHead(val) {
      let itemPath = (val + "").replace(/\s*/g, "");
      this.$router.push(itemPath);
    },

    initRightMenuEvent() {
      this.$nextTick(() => {
        // 获取dom
        let tab_top_dom = document.body.getElementsByClassName(
          "el-tabs__item is-closable"
        );
        // 使用原生js 为单个dom绑定鼠标右击事件
        if (tab_top_dom) {
          [].map.call(tab_top_dom,item=>{
            item.oncontextmenu = this.showContainerContextMenu;
          })
        }
      });
    },
    closeOtherRight() {
      if (this.openTab) {
        let curIndex = -1;
        this.openTab.map((item, index) => {
          if (item.fullPath === this.curTabName) {
            curIndex = index;
          }
        });
        if (curIndex > -1) {
          var startIndex = curIndex + 1;
          let tem = _.clone(this.openTab);
          tem.map((item, index) => {
            if (index >= startIndex) {
              this.tabRemove(item.fullPath);
            }
          });
        }
      }
    },
    // 关闭所有其他菜单，只保留当前
    closeAll() {
      if (this.openTab) {
        let curIndex = -1;
        this.openTab.map((item, index) => {
          if (item.fullPath === this.curTabName) {
            curIndex = index;
          }
        });
        let tem = _.clone(this.openTab);
        tem.map((item, index) => {
          if (index !== curIndex) {
            this.tabRemove(item.fullPath);
          }
        });
      }
    },
    showContainerContextMenu(e) {
      let event = window.event || e;
      event.preventDefault();
      $(".vue-contextmenuName-tab-menu").css("display", "none");
      let x = event.clientX;
      let y = event.clientY;
      this.curTabName = e.path[0].id.substring(4, e.path[0].id.length);
      console.log(this.curTabName);
      this.tabMenuNodes.axis = { x, y };
    },
    //修改密码
    submit() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          this.$store
            .dispatch("changePassword", {
              password: md5(this.passForm.oldPassword),
              newPassword: md5(this.passForm.newPassword)
            })
            .then(ret => {
              this.$notify({ title: "密码修改成功", type: "success" });
              this.getModify();
            });
        }
      });
    },
    //获取用户密码是否为默认密码状态
    getModify() {
      this.API.getPasswordChangeState().then(ret => {
        this.modifyStatus = !ret.data;
      });
    },
    //tab标签点击时，切换相应的路由
    tabClick(tab) {
      this.$store.dispatch("set_active_index", tab.paneName);
      let query = {};
      let path = "";
      let name = "";
      let title = "";
      let fullPath = "";
      if (this.openTab) {
        this.openTab.map(item => {
          if (item.fullPath === tab.paneName) {
            query = item.query;
            path = item.route;
            name = item.name;
            title = item.title;
            fullPath = item.fullPath;
          }
        });
      }

      // if (path.indexOf("sealApply") !== -1) {
      //   let routeData = this.$router.resolve({
      //     path: "/workflow/apply",
      //     query: query
      //   });
      //   window.open(routeData.href, "_blank");
      // } else {
      let to1 = {
        name: name,
        query: query,
        path: path,
        meta: { title: title },
        fullPath: fullPath
      };
      this.addTab(to1);
      this.$router.push({
        name: name,
        query: query,
        params: { canRefresh: false }
      });
      // }
    },
    //移除tab标签
    tabRemove(targetName) {
      //首页不删
      if (targetName == "/" || targetName == "/main") return

      if (this.openTab && this.openTab.length === 1) return

      this.$store.dispatch("delete_tabs", targetName);
      if (this.activeIndex === targetName) {
        // 设置当前激活的路由
        if (this.openTab && this.openTab.length >= 1) {
          this.$store.dispatch(
            "set_active_index",
            this.openTab[this.openTab.length - 1].fullPath
          );
          this.$router.push({
            path: this.openTab[this.openTab.length - 1].fullPath,
            params: { canRefresh: false }
          });
        } else {
          this.$router.push({ path: "/" });
        }
      }
    },
    collapse() {
      this.isCollapse = !this.isCollapse;
      this.isIcon = !this.isIcon;
    },
    // 获取所有数据字典
    getAllDic() {
      this.API.dictionaryTree({ parentId: 0 }).then(res => {
        let tem = res.data;
        if (tem) {
          window.sessionStorage.setItem("allDic", JSON.stringify(tem));
        }
      });
    },
    // 获取用户菜单和按钮权限
    async getAllMenu() {
      if (this.userMenus && this.userMenus.length > 0) {
        this.getCurrentIndex();
        this.getMenus(this.userMenus);
        sessionStorage.setItem("roleKeys", this.userRoleKeys);
      } else {
        await this.API.userResource().then(res => {
          let tem = res.data;
          if (tem) {
            this.updateUserMenus(tem.menuLists);
            this.$store
              .dispatch(
                "updateUserRoleKeys",
                tem.buttonLists && tem.buttonLists.length > 0
                  ? tem.buttonLists.join(",")
                  : ""
              )
              .then(res => {});
            sessionStorage.setItem(
              "roleKeys",
              tem.buttonLists && tem.buttonLists.length > 0
                ? tem.buttonLists.join(",")
                : ""
            );
            //页面刷新后 保留当前页面的tabs
            // this.addTab(this.$route); //! 没有token跳转主页会一直请求
          }
        });
      }
    },
    // 获取待办数据
    async getWaitCount(menus) {
      await this.API.getAllPrompt().then(res => {
        let tem;
        if (res.data) {
          let array = res.data;
          array.push(this.documentPrompt);
          // this.$store.dispatch("updatePromptCount", res.data);
          this.$store.dispatch("updatePromptCount", array);
          menus.map(item => {
            this.setMenuCount(item, array);
          });
          tem = menus;
        } else {
          tem = menus;
        }
        this.$store.dispatch("updateUserMenus", tem).then(res => {});
      });
    },
    // 设置菜单的数量属性
    setMenuCount(item, data) {
      if (data) {
        data.map((waitItem, index) => {
          // if (item.key === "sjlw_1") {
          //   this.$set(item, "count", this.documentPrompt.value);
          // }
          if (waitItem.key === item.key) {
            this.$set(item, "count", waitItem.value);
          } else {
            if (item.children) {
              item.children.map(itemSub => {
                this.setMenuCount(itemSub, data);
              });
            }
          }
        });
      }
    },
    async updateUserMenus(menus) {
      await this.getWaitCount(menus);
      // this.getCurrentIndex();
      this.getMenus(menus);
    },
    async getMenus(menus) {
      if (menus) {
        this.findLeftMenu(menus, null);
        if (!this.noIndex) {
          let leftMenu = menus[0].children;
          this.$store.dispatch("updateLeftMenu", leftMenu).then(res => {});
        }
      }
    },
    //递归查找左侧菜单
    findLeftMenu(data, rootNode) {
      data.map((item, index) => {
        let str = this.getCurRouteStr();
        let itemPath = (item.route + "").replace(/\s*/g, "");
        let tem = item.children;
        if (itemPath === str) {
          // console.log(str, itemPath)
          if (data.length > 0) {
            this.noIndex = true;
            this.$store
              .dispatch("updateLeftMenu", rootNode.children)
              .then(res => {});
            this.$store.dispatch("updateOneTopMenu", rootNode);
          }
          this.openMenu(item);
          // this.findFirstMenu(data, itemPath);
        } else {
          if (str.indexOf("cr") !== -1) {
            let count = this.$route.matched.length;
            let routeName = this.$route.matched[count - 2].name;
            this.curRouteName = routeName;
            // console.log(routeName)
            if (this.userMenus && this.userMenus.length > 0) {
              this.getLeftMenuByTopMenu(routeName);
            }
          } else {
            this.findLeftMenu(tem, rootNode == null ? item : rootNode);
          }
        }
      });
    },

    getLeftMenuByTopMenu(routeName) {
      let curRoute = JSON.stringify({ name: routeName }).replace(/\s*/g, "");
      let rootNode = {};
      this.userMenus.map(item => {
        let temRoute = (item.route + "").replace(/\s*/g, "");
        // console.log(temRoute,curRoute)
        if (temRoute === curRoute) {
          rootNode = item;
        }
      });
      // console.log(rootNode)
      if (rootNode && rootNode.children) {
        this.noIndex = true;
        let leftMenu = rootNode.children;
        this.$store.dispatch("updateLeftMenu", leftMenu).then(res => {});
        this.$store.dispatch("updateOneTopMenu", rootNode);
        this.findFirstMenu(rootNode.children, curRoute);
      }
    },

    /**
     * @desc 获取当前路由地质的字符串包含参数
     * @time 2021/6/26
     */
    getCurRouteStr() {
      let para = {};
      if (window.location.href.indexOf("?") !== -1) {
        let query = window.location.href.split("?")[1];
        let vars = query.split("&");
        for (let i = 0; i < vars.length; i++) {
          let pair = vars[i].split("=");
          if (pair.length > 0)
            this.$set(para, pair[0], decodeURIComponent(pair[1]));
        }
      } else {
        para = null;
      }
      // console.log(this.curRouteName)
      let strRoute = { name: this.curRouteName };
      if (para) {
        strRoute.query = para;
      }
      // console.log(strRoute)
      let str = JSON.stringify(strRoute);
      return str.replace(/\s*/g, "");
    },

    // 查找第一个菜单
    findFirstMenu(data, itemPath) {
      if (data) {
        let tem = data.flatArr();
        tem.every(item => {
          //点击tabs跳转后 左侧菜单选中当前点击的
          let str = itemPath;
          // console.log(item.route.replace(/\s*/g, "") === str.replace(/\s*/g, ""))
          if (item.route.replace(/\s*/g, "") === str.replace(/\s*/g, "")) {
            this.openMenu(item);
            return false;
          }
        });
      }
    },
    openMenu(item) {
      console.log(item, "open");
      let pm = [item.id + "", item.pid + ""];
      this.$router.push(JSON.parse(item.route));
      this.handleMenuSelect(item.id, pm);
    },
    getCurrentIndex() {
      var tem = "";
      var temMenus = _.cloneDeep(this.userMenus);
      if (temMenus) {
        if (temMenus[0] !== undefined) {
          temMenus.map((item, index) => {
            let str = this.getCurRouteStr();
            var itemPath = (item.route + "").replace(/\s*/g, "");
            if (itemPath === str) {
              tem = item.id + "";
            }
          });
        }
      }
      if (tem !== "") {
        this.$store.dispatch("updateIndex", tem);
      }
    },
    handleMenuSelect(index, indexPath) {
      this.$store.dispatch("updateLeftMenuIndex", index + ""); //刷新时保持当前页面被选中
      let tem = this.userMenus.flatArr();
      tem.map((item, index1) => {
        if (item.id + "" === index) {
          // if (item.route.indexOf("sealApply") !== -1) {
          //   let routeData = this.$router.resolve(JSON.parse(item.route));
          //   window.open(routeData.href, "_blank");
          // } else {
          let curRoute = JSON.parse(item.route);
          if (curRoute.params) {
            curRoute.params.canRefresh = true;
          } else {
            curRoute.params = { canRefresh: true };
          }
          this.$router.push(curRoute);
        }
        // this.$store.dispatch("updateLeftMenuIndex",item.id + ""); //刷新时保持当前页面被选中
        // }
      });
    },
    async addTab(to) {
      if (!this.userMenus || this.userMenus.length === 0) {
        await this.getAllMenu();
      }
      let menuName = "";
      let tem = this.userMenus.flatArr();
      tem.map((item, index) => {
        let paraQuery = to.fullPath.split("?");
        let queryParams = "";
        if (paraQuery && paraQuery.length > 1) {
          queryParams = JSON.stringify(to.query);
        }
        let str = ('{"name":"' + to.name + '"}').replace(/\s*/g, "");
        if (queryParams.length > 0) {
          str = (
            '{"name":"' +
            to.name +
            '","query":' +
            queryParams +
            "}"
          ).replace(/\s*/g, "");
        }
        // console.log(to.query !== {})
        if (to.query !== {}) {
          let itemPath = item.route.replace(/\s*/g, "");
          // console.log(itemPath,str)
          if (itemPath === str) {
            menuName = item.menuName;
            this.$store.dispatch("updateLeftMenuIndex", item.id + ""); //刷新时保持当前页面被选中
          }
        }
      });
      //判断路由是否已经打开
      //已经打开的 ，将其置为active
      //未打开的，将其放入队列里
      let flag = false;
      // console.log(menuName, tem)
      for (let item of this.openTab) {
        if (item.fullPath === to.fullPath) {
          this.$store.dispatch("set_active_index", to.fullPath);
          flag = true;
          break;
        }
      }
      if (!flag) {
        let pathArray = to.path.split("/");
        if (pathArray.length > 3) {
          this.$store.dispatch("add_tabs", {
            route: to.path,
            fullPath: to.fullPath,
            title:
              menuName === ""
                ? to.query.tabTitle
                  ? to.query.tabTitle
                  : to.meta.title
                : menuName,
            name: to.name,
            query: to.query
          });
          this.$store.dispatch("set_active_index", to.fullPath);
        }
      }
    }
  },
  watch: {
    $route(to, from) {
      this.addTab(to);
    }
  },
  components: {
    NavMenu
  }
};
</script>
<style lang="less" scoped>
.demo-form{
  .el-form-item{
    margin-bottom: 30px;
  }
}
.el-header {
  padding: 0px !important;
}

.is-always-shadow {
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
}

/deep/ .tab_card {
  .el-tabs--border-card {
    background: #ffffff;
    border: none;
    -webkit-box-shadow: none;
    box-shadow: none;
  }

  .el-card__body {
    padding: 0px;
    height: 60px;
    line-height: 60px;
  }

  .el-tabs__content {
    padding: 0px;
  }

  .el-tabs__header {
    background-color: white;
    border-bottom: none;
    margin: 0;
  }

  .el-tabs__item {
    padding: 0 20px;
    height: 36px;
    border-radius: 6px !important;
    margin-right: 5px !important;
    margin-left: 5px !important;
    margin-top: 0px;
    line-height: 35px;
    display: inline-block;
    list-style: none;
    font-size: 14px;
    font-weight: 500;
    color: #99b4ca;
    border: none !important;
    position: relative;
    background-color: #f4faff;
  }

  .el-tabs__item.is-active {
    /*color: #0075ff !important;*/
    border: none !important;
    width: auto;
    background-color: #f4faff !important;
  }

  .el-icon-close {
    position: absolute;
    top: 0px;
    right: 0px;
    background-color: #99b4ca;
    color: white;
  }

  .el-tabs__nav-prev {
    border: 1px solid #cecece;
    height: 55px;
    line-height: 55px;
    font-size: 16px;
  }

  .el-tabs__nav-next {
    border: 1px solid #cecece;
    height: 55px;
    line-height: 55px;
    font-size: 16px;
  }
}

/deep/ .el-main {
  padding: 0;
}

/deep/ .el-header {
  padding: 0 0 0 5px;
}

/deep/ .el-menu {
  border-right: none;
}

.left_menu {
  background-color: #445162;

  .nav-logo {
    /*height: 33px;*/
    margin-top: 32px;
    /*width: 57px;*/
    height: 45px;
    margin-bottom: 15px;
  }

  .nav-logo-coll {
    margin-top: 54px;
    /*width: 43px;*/
    height: 33px;
    margin-bottom: 15px;
  }

  /deep/ .el-menu {
    background-color: #445162;

    .el-menu-item.is-active {
      color: white !important;
      background-color: #363f50 !important;

      i {
        color: #0075ff !important;
      }
    }

    .el-submenu__title,
    .el-submenu__title,
    .el-menu-item {
      color: #99b4ca !important;

      i {
        color: #99b4ca !important;
      }
    }

    .el-menu-item:focus,
    .el-menu-item:hover {
      background-color: #363f50 !important;
    }

    .el-submenu__title:focus,
    .el-submenu__title:hover {
      background-color: #363f50 !important;
    }
  }
}

.sidebar {
  width: 200px !important;
}

.sidebar--show {
  .sidebar {
    transform: translate(0, 0);
    width: 230px !important;
  }
}

/deep/ .context-menu-list {
  height: 24px !important;
  padding: 5px;
}

.sidebar--hide {
  .sidebar {
    transform: translate(0, 55);
    width: 70px !important;
  }
}

/deep/ .tab_card .el-tabs__nav-prev {
  border: 0;
}

/deep/ .tab_card .el-tabs__nav-next {
  border: 0;
}

.tab_card /deep/ .el-tabs__nav {
  margin-left: 0 !important;
}

.tabsItem {
}
</style>
<style lang="sass" scoped rel="stylesheet/scss">
@import "../../../styles/vars"
.collapse-button
  position: absolute
  bottom: 40px
  left: 215px
  width: 14px
  z-index: 1000
  height: 23px
  cursor: pointer
  border-top-left-radius: 5px
  border-bottom-left-radius: 5px
  display: flex
  justify-content: center
  align-items: center

.collapse-button--hide
  position: absolute
  bottom: 40px
  left: 56px
  width: 14px
  z-index: 1000
  height: 23px
  cursor: pointer
  border-top-left-radius: 5px
  border-bottom-left-radius: 5px
  display: flex
  justify-content: center
  align-items: center
</style>
